<template>
  <div id="cesiumContainer" :style="{ width: '100%', height: '100%', overflow: 'hidden', position: 'relative' }" ref="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import { mapDestroy, mapInit } from './map.init';
import { useCesiumZoomDistance } from '@/hooks/useCesiumZoomDistance';

const cesiumContainer = ref();
const emit = defineEmits(['init']);

// 使用Cesium缩放距离控制hook
const { isUltraWideScreen, updateZoomDistance } = useCesiumZoomDistance();

onMounted(() => {
  mapInit(cesiumContainer.value, emit);
  // 地图初始化后，确保缩放距离设置正确
  nextTick(() => {
    updateZoomDistance();
  });
});

onUnmounted(() => {
  mapDestroy();
});
</script>
